<template>
  <div class="myContainer">
    <el-row class="myTitleBorderBottom myMarginBottom_10px">
      <el-col :span="12" class="myLineHeight_40px">
        <span v-if="type=='add'">新增</span>
        <span v-if="type=='update'">编辑</span>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         商品类别名称:
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入商品类别名称" v-model="className" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px" :gutter="10">
      <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
        logo图片 :
      </el-col>
      <el-col :span="7">
        <el-upload
          class="avatar-uploader"
          :action="responseUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>  
        <span style="color: #f00">上传图片尺寸比例1:1,建议图片大小为100KB,格式为JPG/PNG。</span>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         类别等级:
      </el-col>
      <el-col :span="7">
        <template>
          <el-select v-model="classLevel"
            clearable
            @change="onClassLevel"
            placeholder="请选择类别等级">
            <el-option
              v-for="item in classLevelList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         上一级分类:
      </el-col>
      <el-col :span="7">
        <template>
          <el-select v-model="upperClassLevel"
            clearable
            placeholder="请选择上一级分类">
            <el-option
              v-for="item in upperClassLevelList"
              :key="item.CATEGORY_ID"
              :label="item.CATEGORYNAME"
              :value="item.CATEGORY_ID">
            </el-option>
          </el-select>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        有效时间段:
      </el-col>
      <el-col :span="7">
        <template>
          <el-time-picker
            is-range
            :clearable=false
            v-model="effectiveTime"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围">
          </el-time-picker>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         排序（倒序）:
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入排序（倒序）" v-model="ORDERIDX" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
         删除标记:
      </el-col>
      <el-col :span="7">
        <template>
          <el-select 
            v-model="deleteSign"
            clearable
            placeholder="请选择刪除标志">
            <el-option
              v-for="item in deleteSignList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="7" :offset="3">
        <el-button type="primary" class="myBgGreen" v-if="type=='update' && isShow(161)" @click="onEditClass">保 存</el-button>
        <el-button type="primary" class="myBgGreen" v-if="type=='add'" @click="onCreate">新 增</el-button>
        <el-button type="primary" class="myBgGreen" @click="onBack">返 回</el-button>
      </el-col>
    </el-row>
    
  </div>
</template>
<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myMarginBottom_10px{
    margin-bottom: 20px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border:1px solid #d8dce5;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<script>
  import { EBIZ_API , EBIZ_SHOW_PIC_API } from '@/config/baseUrl';
  import { getClassList , addRestaurantClass , getClassDetail , editClass } from '@/api/commerce';
  import qs from "querystring";
  export default {
    data(){
      return{
        title: "餐饮分类管理",
        id: "",
        is_modifly:false,
        type:"",
        className:"",
        imageUrl:"",
        saveImageUrl:"",
        responseUrl:EBIZ_API+'/appAdmin_pictures/save.do?pictype=adpic',//上传图片的地址url
        adjumpValue:"",
        deleteSign:"",
        deleteSignList:[{value:0,label:"未删除"},{value:1,label:"已删除"}],
        classLevel:2,
        classLevelList:[{value:2,label:"二级分类"},{value:3,label:"三级分类"}],
        upperClassLevel:"",
        upperClassLevelList:[],
        ORDERIDX:"",
        effectiveTime:["00:00:00","23:59:59"]
      }
    },
    components: {
        
    },
    created(){
      document.title=this.title;
      this.type = this.$route.query.type;
      this.id = this.$route.query.id;
      if(this.type=='add'){
        this.onClassLevel(this.classLevel);
      }
      if(this.type=='update'){
        this.onGetClassDetail();
      }
      
    },
    methods:{     
      onEditClass(){
        let vm=this;
        let params={
          CATEGORY_ID:vm.id,
          CATEGORYTYPE:1,
          CATEGORYNAME:vm.className,
          LOGOIMG:vm.saveImageUrl,
          CATEGORYGRADE:vm.classLevel,
          PARENTID:vm.upperClassLevel,
          ORDERIDX:vm.ORDERIDX,
          DELETED:vm.deleteSign,
          BEGINTIME:vm.effectiveTime[0],
          ENDTIME:vm.effectiveTime[1]
        }
        editClass(qs.stringify(params)).then(response => {
          this.$message.success('执行成功！');
          this.$router.go(-1);
        }).catch(error => {
          this.$message.error('执行失败！');
        })
      },
      onCreate(){//添加
        let vm=this;
        let params={
          // CATEGORY_ID:
          CATEGORYTYPE:1,
          CATEGORYNAME:vm.className,
          LOGOIMG:vm.saveImageUrl,
          CATEGORYGRADE:vm.classLevel,
          PARENTID:vm.upperClassLevel,
          ORDERIDX:vm.ORDERIDX,
          DELETED:vm.deleteSign,
          BEGINTIME:vm.effectiveTime[0],
          ENDTIME:vm.effectiveTime[1]
        }
        addRestaurantClass(qs.stringify(params)).then(response => {
          let res=response.data;
          vm.$message.success("添加数据成功！");
          this.$router.go(-1);
          console.log("添加成功",res);
        }).catch(error => {
          vm.$message.error("添加数据失败！");
          console.log("添加失败",error);
        })
        //console.log(params)
      },
      onBack(){//返回
        this.$router.go(-1);
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.saveImageUrl=res.saveUrl;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return (isJPG || isPNG) && isLt2M;
      },
      onClassLevel(val){//动态拉取分类
        let vm=this;
        vm.upperClassLevel="";
        let params={
          CATEGORYTYPE:1,
          CATEGORYGRADE:val-1
        }
        getClassList(qs.stringify(params)).then(response => {
          let res=response.data;
          vm.upperClassLevelList=res.OBJECT;
          console.log(res)
        }).catch(error => {

        })
      },
      onGetClassDetail(){//拉取详情
        let vm=this;
        let params={
          CATEGORY_ID:vm.id
        }
        getClassDetail(params).then(response => {
          let res=response.data.OBJECT;
          vm.imageUrl=EBIZ_SHOW_PIC_API+res.LOGOIMG;
          vm.saveImageUrl=res.LOGOIMG;
          vm.className=res.CATEGORYNAME;
          vm.classLevel=res.CATEGORYGRADE;
          vm.onClassLevel(vm.classLevel);
          vm.upperClassLevel=res.PARENTID;
          vm.ORDERIDX=res.ORDERIDX;
          vm.deleteSign=res.DELETED;
          vm.$set(vm.effectiveTime,0,res.BEGINTIME.split(" ")[1]);
          vm.$set(vm.effectiveTime,1,res.ENDTIME.split(" ")[1]);
          // vm.effectiveTime[0]=res.BEGINTIME;
          // vm.effectiveTime[1]=res.ENDTIME;
          console.log(res)
        }).catch(error => {
          console.log("拉取失败",error);
        })
      } 
      

    }
  
  }


</script>



